From 9a5754fdba9d778f820fe89b44d1e21ca9f0bb4d Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 16 May 2023 22:40:02 +0700 Subject: Update v3.5.7 (#12) * Merge request (#11) * Update v3.5.5 > Now Skip button will hide if player is not in focused state. > Added some options to player. > Manga images should be displayed now. * Update videoPlayer.js * Revamp hero section #1 * UI Improvement > Updating main page > Updated Genres selection using params method > Added search bar v1.0 on main page ( [ctrl + space] to access search bar ) * update meta * Update [...id].js * Update [...id].js > Back to ssr I guess * update episode selector * Update [...info].js * Update UI > Added On-Going section for AniList user * Update content.js * added dynamic og * Update og.jsx * Update og * Update og.jsx * update og and id fallback > Added fallback for anime info if it's not found * Update v3.5.7 > Added On-Going section for AniList user > Added Genre section > Added dynamic Open Graph when sharing anime > Added Episode Selector above information --- pages/anime/[...id].js | 129 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 95 insertions(+), 34 deletions(-) (limited to 'pages/anime/[...id].js') diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index ae6ac34..dc385f9 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -140,16 +140,18 @@ const infoQuery = `query ($id: Int) { } }`; -export default function Info() { - const { data: session, status } = useSession(); +export default function Info({ info, color }) { + const { data: session } = useSession(); const [data, setData] = useState(null); - const [info, setInfo] = useState(null); + // const [infos, setInfo] = useState(null); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [stall, setStall] = useState(false); - const [color, setColor] = useState(null); + const [domainUrl, setDomainUrl] = useState(""); + + // console.log(info); const [showAll, setShowAll] = useState(false); const [open, setOpen] = useState(false); @@ -164,13 +166,15 @@ export default function Info() { (data) => data.mediaRecommendation ); - // const [log, setLog] = useState(null); - // console.log(rec); - useEffect(() => { + const { protocol, host } = window.location; + const url = `${protocol}//${host}`; + + setDomainUrl(url); + const defaultState = { data: null, - info: null, + // info: null, episode: null, loading: true, statuses: null, @@ -204,23 +208,23 @@ export default function Info() { if (id) { setLoading(false); try { - const [res, info] = await Promise.all([ + const [res] = await Promise.all([ fetch(`https://api.moopa.my.id/meta/anilist/info/${id?.[0]}`), - fetch("https://graphql.anilist.co/", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - query: infoQuery, - variables: { - id: id?.[0], - }, - }), - }), + // fetch("https://graphql.anilist.co/", { + // method: "POST", + // headers: { + // "Content-Type": "application/json", + // }, + // body: JSON.stringify({ + // query: infoQuery, + // variables: { + // id: id?.[0], + // }, + // }), + // }), ]); const data = await res.json(); - const infos = await info.json(); + // const infos = await info.json(); if (res.status === 500) { setEpisode(null); @@ -229,10 +233,10 @@ export default function Info() { } else if (res.status === 404) { window.location.href("/404"); } - setInfo(infos.data.Media); + // setInfo(infos.data.Media); // setLog(data); - const textColor = setTxtColor(infos.data.Media.coverImage?.color); + // const textColor = setTxtColor(infos.data.Media.coverImage?.color); if (!data || data?.episodes?.length === 0) { const res = await fetch( @@ -246,19 +250,19 @@ export default function Info() { } else { setEpisode(datas.episodes); } - setColor({ - backgroundColor: `${data?.color || "#ffff"}`, - color: textColor, - }); + // setColor({ + // backgroundColor: `${data?.color || "#ffff"}`, + // color: textColor, + // }); setStall(true); } else { setEpisode(data.episodes); } - setColor({ - backgroundColor: `${data?.color || "#ffff"}`, - color: textColor, - }); + // setColor({ + // backgroundColor: `${data?.color || "#ffff"}`, + // color: textColor, + // }); if (session?.user?.name) { const response = await fetch("https://graphql.anilist.co/", { @@ -339,6 +343,21 @@ export default function Info() { ? info?.title?.romaji || info?.title?.english : "Retrieving Data..."} + + + + handleClose()}>
@@ -743,13 +762,15 @@ export default function Info() { // Something went wrong, can't retrieve any episodes :/ //

-

{epiStatus} while retrieving data

+ {/*

{epiStatus} while retrieving data

*/} 
-                            {error}
+                            
+                              Something went wrong while retrieving data :/
+
)} @@ -785,6 +806,46 @@ export default function Info() { ); } +export async function getServerSideProps(context) { + const { id } = context.query; + + const res = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: infoQuery, + variables: { + id: id?.[0], + }, + }), + }); + + const json = await res.json(); + const data = json?.data?.Media; + + if (!data) { + return { + notFound: true, + }; + } + + const textColor = setTxtColor(data?.coverImage?.color); + + const color = { + backgroundColor: `${data?.coverImage?.color || "#ffff"}`, + color: textColor, + }; + + return { + props: { + info: data, + color: color, + }, + }; +} + function convertSecondsToTime(sec) { let days = Math.floor(sec / (3600 * 24)); let hours = Math.floor((sec % (3600 * 24)) / 3600); -- cgit v1.2.3